<template>
    <div>
        <el-form-item label="公司地址" prop="address">
        <div class="address-container">
            <el-cascader
            v-model="addressArray"
            :options="addressOptions"
            @change="handleAddressChange"
            placeholder="请选择省/市/县"
            />
            <el-input 
            v-model="detailAddress" 
            placeholder="详细地址如乡镇/街道/门牌号"
            @input="updateFullAddress" 
            />
        </div>
        </el-form-item>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'


// 地址相关数据
const addressArray = ref([]) // 存储省市县的选择值数组
const detailAddress = ref('') // 详细地址
const fullAddress = ref('') // 完整地址，用于保存到数据库


// 省市县选项数据
const addressOptions = ref([
  {
    value: '四川省',
    label: '四川省',
    children: [
      {
        value: '巴中市',
        label: '巴中市',
      },
      {
        value: 'df市',
        label: 'df市',
      }
    ]
  },
  {
    value: '四川省',
    label: '四川省',
    children: [
      {
        value: '巴蜀时',
        label: '巴中市',
      }
    ]
  }
])
// 当省市县选择变化时
const handleAddressChange = () => {
  updateFullAddress()
}

// 更新完整地址
const updateFullAddress = () => {
  // 拼接省市县
  const selectedAddress = addressArray.value.join(' ')
  // 拼接详细地址
  fullAddress.value = selectedAddress + ' ' + detailAddress.value
}

// 在表单提交时，使用 fullAddress.value 作为地址字段的值



// 假设从服务器获取的地址字符串格式为：四川省 巴中市 通江县 XXX
// const loadCompanyAddress = (addressString) => {
//   if (!addressString) return
  
//   const parts = addressString.split(' ')
//   if (parts.length >= 3) {
//     // 前三部分是省市县
//     addressArray.value = [parts[0], parts[1], parts[2]]
//     // 剩余部分是详细地址
//     detailAddress.value = parts.slice(3).join(' ')
//   }
// }

</script>

<style scoped>
.address-container {
  display: flex;
  gap: 10px;
}

.address-container .el-cascader {
  width: 50%;
}

.address-container .el-input {
  width: 50%;
}
</style>